<!doctype html>
<html lang="en">

<head>
   <!-- Required meta tags -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <!-- Favicon icon-->
   <link rel="apple-touch-icon" sizes="180x180"
      href="https://block.codescandy.com/assets/images/favicon/apple-touch-icon.png" />
   <link rel="icon" type="image/png" sizes="32x32"
      href="https://block.codescandy.com/assets/images/favicon/favicon-32x32.png" />
   <link rel="icon" type="image/png" sizes="16x16"
      href="https://block.codescandy.com/assets/images/favicon/favicon-16x16.png" />
   <link rel="manifest" href="https://block.codescandy.com/assets/images/favicon/site.webmanifest" />
   <link rel="mask-icon" href="https://block.codescandy.com/assets/images/favicon/block-safari-pinned-tab.svg"
      color="#8b3dff" />
   <link rel="shortcut icon" href="https://block.codescandy.com/assets/images/favicon/favicon.ico" />
   <meta name="msapplication-TileColor" content="#8b3dff" />
   <meta name="msapplication-config" content="https://block.codescandy.com/assets/images/favicon/tile.xml" />

   <!-- Color modes -->
   <script src="https://block.codescandy.com/assets/js/vendors/color-modes.js"></script>

   <!-- Libs CSS -->
   <link href="https://block.codescandy.com/assets/libs/simplebar/dist/simplebar.min.css" rel="stylesheet" />
   <link href="https://block.codescandy.com/assets/libs/bootstrap-icons/font/bootstrap-icons.min.css"
      rel="stylesheet" />

   <!-- Scroll Cue -->
   <link rel="stylesheet" href="https://block.codescandy.com/assets/libs/scrollcue/scrollCue.css" />

   <!-- Box icons -->
   <link rel="stylesheet" href="https://block.codescandy.com/assets/fonts/css/boxicons.min.css" />

   <!-- Theme CSS -->
   <link rel="stylesheet" href="https://block.codescandy.com/assets/css/theme.min.css">

   <title>404 error - Responsive Website Template | Block</title>
</head>

<body>
   <main class="w-100">
      <!--404 error start-->
      <div class="container d-flex flex-column overflow-hidden">
         <div class="row align-items-center justify-content-center min-vh-100 text-center">
            <div class="col-lg-6 col-12">
               <div class="position-relative mb-7">
                  <div class="scene d-none d-lg-block" data-relative-input="true">
                     <div class="position-absolute top-0" data-depth="0.5">
                        <img src="https://block.codescandy.com/assets/images/error/stars.svg" alt />
                     </div>
                  </div>
                  <div class="scene d-none d-lg-block" data-relative-input="true">
                     <div class="position-absolute" data-depth="0.1">
                        <img src="https://block.codescandy.com/assets/images/error/rocket.svg" alt />
                     </div>
                  </div>
                  <div class="scene d-none d-lg-block" data-relative-input="true">
                     <div class="position-absolute top-0 start-50 translate-middle"
                        style="margin-top: -80px; margin-left: -80px" data-depth="0.1">
                        <img src="https://block.codescandy.com/assets/images/error/globe.svg" alt />
                     </div>
                  </div>
                  <div class="scene d-none d-lg-block" data-relative-input="true">
                     <div class="position-absolute start-50" data-depth="0.1">
                        <img src="https://block.codescandy.com/assets/images/error/astronut.svg" alt
                           style="top: -110px; position: absolute; bottom: 0" />
                     </div>
                  </div>
                  <div class="position-relative z-n1">
                     <img src="https://block.codescandy.com/assets/images/error/404-number.svg" alt class="img-fluid" />
                  </div>
                  <div class="scene d-none d-lg-block" data-relative-input="true">
                     <div class="position-absolute start-100 bottom-0" style data-depth="0.1">
                        <img src="https://block.codescandy.com/assets/images/error/planet.svg" alt />
                     </div>
                  </div>
               </div>

               <h2>Oops page not found</h2>
               <p>The page you are looking for is not available.</p>

               <a href="./index.html" class="btn btn-primary">Go back to home</a>
            </div>
         </div>
      </div>
      <div class="position-absolute end-0 bottom-0 m-4 d-none">
         <div class="dropdown">
            <button class="btn btn-light btn-icon rounded-circle d-flex align-items-center" type="button"
               aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
               <i class="bi theme-icon-active"></i>
               <span class="visually-hidden bs-theme-text">Toggle theme</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
               <li>
                  <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
                     aria-pressed="false">
                     <i class="bi theme-icon bi-sun-fill"></i>
                     <span class="ms-2">Light</span>
                  </button>
               </li>
               <li>
                  <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
                     aria-pressed="false">
                     <i class="bi theme-icon bi-moon-stars-fill"></i>
                     <span class="ms-2">Dark</span>
                  </button>
               </li>
               <li>
                  <button type="button" class="dropdown-item d-flex align-items-center active"
                     data-bs-theme-value="auto" aria-pressed="true">
                     <i class="bi theme-icon bi-circle-half"></i>
                     <span class="ms-2">Auto</span>
                  </button>
               </li>
            </ul>
         </div>
      </div>
      <!--404 error end-->
   </main>
   <!-- Libs JS -->
   <script src="https://block.codescandy.com/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://block.codescandy.com/assets/libs/simplebar/dist/simplebar.min.js"></script>
   <script src="https://block.codescandy.com/assets/libs/headhesive/dist/headhesive.min.js"></script>

   <!-- Theme JS -->
   <script src="https://block.codescandy.com/assets/js/theme.min.js"></script>

   <script src="https://block.codescandy.com/assets/libs/jarallax/dist/jarallax.min.js"></script>
   <script src="https://block.codescandy.com/assets/js/vendors/jarallax.js"></script>
   <script src="https://block.codescandy.com/assets/libs/parallax-js/dist/parallax.min.js"></script>
   <script src="https://block.codescandy.com/assets/js/vendors/parallax.js"></script>
</body>

</html>